import {
  createBrowserRouter,
  RouterProvider,
  RouteObject,
} from "react-router-dom";
import { lazy, Suspense } from "react";

const MnistTrain = lazy(() => import("./pages/mnist-train"));
const ImageClassify = lazy(() => import("./pages/image-classify"));
const TestTensor = lazy(() => import("./pages/test-tensor"));
const HomePage = lazy(() => import("./pages/home-page"));

export const routes: RouteObject[] = [
  {
    path: "/",
    element: <HomePage />,
  },
  { path: "/tensorflow", element: <MnistTrain /> },
  { path: "/image-classify", element: <ImageClassify /> },
  { path: "/test-tensor", element: <TestTensor /> },
];

export default function App() {
  return (
    <Suspense fallback={"loading"}>
      <RouterProvider router={createBrowserRouter(routes)} />
    </Suspense>
  );
}
